<template>
    <div class="orderList">
        <div class="navHead">
            <van-nav-bar
                    :border="false"
                    title="我的订单"
                    left-arrow
                    @click-left="toBack">
            </van-nav-bar>
        </div>
        <order-tabs :tabs-type="tabsType" @change="tabsChange"></order-tabs>
        <div class="divider"></div>
        <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh" ref="">
            <van-list
                    ref=""
                    v-model="loading"
                    :finished="finished"
                    :immediate-check="false"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div v-for="(item,k) in orderList" :key="k">
                    <div class="goodsWrap page-pad-pk ">
                        <div class="linePad">
                            <div class="d-flex-pk header">
                                <div class="d-flex-pk shopInfo">
                                    <img src="../../assets/images/shopHome.png" class="shopHome" />
                                    <div class="shopName">{{item.shopName}}</div>
                                </div>
                                <div>
                                    <div v-for="(s,k) in orderStatus" :key="k">
                                        <div v-if="item.status === s.status" class="orderStatus d-flex-pk">
                                            <div class="text-red-pk">{{s.flag}}</div>
                                            <div v-if="s.status !== '3'"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-for="(g,k) in item.orderGoodsVoList"
                             :key="k"
                             class="pad-top-item" >
                            <div class="goodsList"
                                 @click="handleOrderDetail(item)">
                                <div class="d-flex-pk goodsItem">
                                    <div>
                                        <pk-img
                                                :src="g.picture"
                                                round
                                                width="88px"
                                                height="88px">
                                        </pk-img>
                                    </div>
                                    <div class="d-flex-pk flex-fill">
                                        <div class="goodsName flex-fill text-black-pk">
                                            <div class="text-black-pk font-size-14-pk">{{g.goodsName}}</div>
                                            <div class="flex-fill text-light-pk font-size-13-pk pad-top-item">{{g.attrInputName}}</div>
                                        </div>
                                        <div class="text-right w-status">
                                            <div class="text-black-pk">{{g.price}}</div>
                                            <div class="text-light-pk font-size-13-pk">x{{g.attrNum}}</div>
                                            <!--状态:0未付款 1已付款未发货 2取消订单,3，已发货，4，确认收货，5，待退款，
                                             6已退款，7已申请退货，8已退货，9待卖家同意退货，10交易完成，11待买家填写物流信息-->
                                            <div class="font-size-13-pk text-light-yellow-pk" v-if="g.status==='5'">退款中</div>
                                            <div class="font-size-13-pk text-light-yellow-pk" v-if="g.status==='6'">退款成功</div>
                                            <div class="font-size-13-pk text-light-yellow-pk" v-if="g.status==='6'">退货中</div>
                                            <div class="font-size-13-pk text-light-yellow-pk" v-if="g.status==='8'">已退货</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-right text-black-pk totalNum light-border-bottom-gray">
                                <span> 共{{item.totalNum}}件商品 合计:</span><span class="">{{item.totalPrice}}</span>
                            </div>
                            <div class="text-right " v-if="item.status === '0'">
                                <div class="operateBtn btn-border-gray">联系卖家</div>
                                <div class="operateBtn btn-border-gray" @click="cancelOrder(item.orderId)">取消订单</div>
                                <div class="operateBtn btn-border-red" @click="goPay(item.orderId)">去支付</div>
                            </div>
                            <div class="text-right " v-if="item.status === '3'">
                                <div class="operateBtn btn-border-gray" @click="extendReceive(item.orderId)">延长收货</div>
                                <div class="operateBtn btn-border-red" @click="orderReceiver(item.orderId)">确认收货</div>
                            </div>
                            <div class="text-right " v-if="item.status === '4' || item.status === '10'">
                                <div class="operateBtn btn-border-red" >评价</div>
                            </div>
                            <div class="text-right " v-if="item.status === '1'">
                                <div class="operateBtn btn-border-gray" @click="deliverGoods">催发货</div>
                                <div class="operateBtn btn-border-gray" @click="handleShipDetail">查看物流</div>
                            </div>
                            <div class="text-right " v-if="item.status === '2'">
                                <div class="operateBtn btn-border-red" @click="buy(g.goodsId)">再次购买</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>

    import OrderTabs from "./OrderTabs"
    export default {
        name:"orderList",
        title:"我的订单",
        components:{
            OrderTabs,
        },
        data(){
            return{
                page: this.$global.page,
                size: this.$global.size,
                pageNum: 1,
                pages:  this.$global.pages,
                total:0,
                orderStatus : [
                    {
                        status : "0",
                        name : "未付款",
                        cla : "",
                        flag : "待付款"
                    },
                    {
                        status : "1",
                        name : "已付款未发货",
                        cla : "",
                        flag : "待发货"
                    },
                    {
                        status : "2",
                        name : "取消订单",
                        cla : "",
                        flag : "交易关闭"
                    },
                    {
                        status : "3",
                        name : "已发货",
                        cla : "",
                        flag : "买家已发货"
                    },
                    {
                        status : "4",
                        name : "确认收货",
                        cla : "",
                        flag : "交易成功"
                    },
                    {
                        status : "5",
                        name : "待退款",
                        cla : "",
                        flag : "待退款"
                    },
                    {
                        status : "6",
                        name : "已退款",
                        cla : "",
                        flag : "已退款"
                    },
                    {
                        status : "7",
                        name : "待退货",
                        cla : "",
                        flag : "待退货"
                    },
                    {
                        status : "8",
                        name : "已退货",
                        cla : "",
                        flag : "已退货"
                    },
                ],
                orderList:[],
                userId : "",
                search: {
                    goodsName: "",
                    status:this.$route.params.status
                },
                isRefreshing: false,//上拉刷新
                loading: false,
                finished: false,
                tabsType:this.$route.params.tabsType,
            }
        },
        created() {
        },
        mounted() {
            this.$toast.loading();
            this.getAllOrderList();
        },
        activated() {
            //组件激活
            this.$nextTick(()=> {
                setTimeout(()=> {
                    this.$util.setScrollTop()
                },100)
            })
        },
        beforeRouteEnter(to, from, next) {
            let prePath = "";
            //待优化，将参数带上
            if(from.path === "/login" || from.path === "/register" || from.path === "/" || from.path === "/wxLogin" ) {
                prePath = "/index"
            }else {
                //涉及到需要保存上一页数据的，可以拼接到地址
                prePath = from.fullPath
            }
            next( vm => {
                vm.$store.commit("setPrePath", prePath)
            })
        },
        methods:{
            toBack(){
              this.$router.push({
                  name:'personalCenter'
              })
            },
            //获取所有订单;
            getAllOrderList(type){
                this.$api.getAllOrderList({
                    "groupStatus": "",
                    "orderType": 0,
                    "page": this.page,
                    "size": this.size,
                    "status": this.search.status,
                    "userId": this.userId
                }).then(res => {
                    this.$toast.clear();
                    this.loading = false;
                    let result = this.$resArr(res);
                      if(result){
                          this.total = parseInt(result.total);
                          this.pageNum = result.pageNum;
                          this.pages = result.pages;
                          if(type === "load") {
                              this.orderList = this.orderList.concat(result.list);
                          }else {
                              this.orderList = result.list;
                          }
                          this.onLoad()
                      }
                });
            },
            tabsChange(val) {
                //val是传过来的status的值
                this.page = 1;
                this.search.status = val;
                this.$toast.loading();
                this.getAllOrderList();
            },
            //上拉刷新
            onRefresh() {
                this.$toast.loading({
                    message: "加载中...",
                });
                this.page = 1;
                this.size = this.$global.size;
                this.getAllOrderList();
                this.isRefreshing = false
            },
            //下拉加载
            onLoad() {
                if(this.page >= this.pages) {
                    this.finished = true
                }else {
                    this.page ++;
                    this.getAllOrderList("load")
                }
            },
            //订单详情
            handleOrderDetail(item){
               this.$util.getScrollTop();
               this.$router.push({
                   path:"/orderDetail",query:{orderId:item.orderId}
               })
               /*this.$router.push({
                    name:"orderDetail",
                    params:{
                        orderId:item.orderId,
                        status: item.status,
                        orderSn: item.orderSn,
                    }
                })*/
            },
            //去支付
            goPay(){

            },
            //取消订单
            cancelOrder(orderId){
              this.$api.cancelOrder({
                  "orderId": orderId,
              }).then(res=>{
                  let result=this.$resResult(res);
                  if(result){
                      this.getAllOrderList();
                  }
              })
            },
            //再次购买
            buy(goodsId){
                this.$router.push({
                    name:"goodsDetail",
                    params:{
                        goodsId:goodsId,
                    }
                })
            },
            //确认收货
            orderReceiver(orderId){
                this.$api.receiveOrder({
                    "orderId":orderId
                }).then(res=>{
                    let result=this.$resData(res)
                    if(result){
                        this.getAllOrderList()
                    }
                })
            },
            //催发货
            deliverGoods(){
                this.$toast({
                    message:"催发货成功"
                })
            },
            //延长收货
            extendReceive(orderId){
                this.$api.extendOrder({
                    "orderId":orderId
                }).then(res=>{
                    let result=this.$resData(res)
                    if(result){
                        this.getAllOrderList()
                    }
                })
            },
            //查看物流
            handleShipDetail(){
               this.$router.push({
                   name:"orderShipDetail"
               })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .orderList{
        background-color: #f5f5f5;
        font-size: 14px;
        .border-top{
            border-top: 1px solid #f5f5f5;
        }
        .text-right{
            text-align: right;
        }
        .pad-top-item{
            padding-top: 10px;
        }
        .flex-fill{
            flex: 1 1 auto ;
        }
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 999;
        }
        .optionWrap{
            padding: 10px 0;
            background-color: #e9ecef;
            position: fixed;
            top: 43px;
            right: 0;
            left: 0;
            z-index: 1030;
            .optionItems{
                justify-content: space-around;
                .position-relative{
                    position: relative;
                    .optionName{

                    }
                    .tab-active{
                        height: 2px;
                        width: 100%;
                        position: absolute;
                        bottom: -2px;
                        left: 0;
                        background: red;
                    }
                }
            }
        }
        .divider{
            padding-top: 90px;
        }
        .goodsWrap{
            margin-top: 10px;
            padding-bottom: 10px;
            background: #fff;
            .totalNum{
                padding: 10px 0;
                margin-bottom: 10px;
            }
            .linePad{
                padding: 10px 0;
            }
            .header{
                align-items: center;
                justify-content: space-between;
                .shopInfo{
                    align-items: center;
                    .shopName{
                        padding-left: 5px;
                        font-weight: 600;
                    }
                }
                .orderStatus{
                    align-items: center;
                    justify-content: space-between;
                    flex-direction: row;
                    text-align: right;
                }
                .shopHome{
                    width: 21px;
                    height: 20px;
                }
            }
            .goodsList{
                .goodsItem{
                    justify-content: space-between;
                    .goodsImg{
                        width: 88px;
                        height: 88px;
                    }
                    .w-status{
                        width: 2rem;
                    }
                }
                .goodsName{
                    margin-right:5px;
                    margin-left: 5px;
                }

            }
            .orderNum{
                text-align: right;
            }
            .operateBtn{
                border-radius: 5px;
                padding: 5px;
                display: inline-block;
                box-sizing: border-box;
                /*width: 70px;
                height: 22px;*/
                line-height: 14px;
                text-align: center;
                margin-left: 5px;
                margin-top: 5px; ;
            }
            .btn-border-gray{
                border:1px solid #4D4D4D;
                color: #4D4D4D;
            }
            .btn-border-red{
                border:1px solid #D82D11;
                color: #D82D11;
            }

        }
    }
</style>
